<template>
  <el-button type="primary" color="#017dff"  @click="personFlag = true">
    添加管理员<el-icon class="el-icon--right">
      <Plus />
    </el-icon>
  </el-button>
  <el-table :data="personData" border style="width: 100%">
    <el-table-column type="index" prop="date" label="序号" width="200" />
    <el-table-column prop="address" label="账号" width="200">
      <template #default="scope">
        <p>{{ scope.row.adminname }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="权限" width="300">
      <template #default="scope">
        <el-tag key="Tag 2" type="success" class="mx-1" effect="dark">
          {{ role.filter(item=>item.value == scope.row.role)[0]?.label }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作" width="500">
      <template #default="sss">
        <el-button size="small" color="#017dff" type="primary" @click="editPersonFn(sss.row.adminname)"> 修改 </el-button>
        <el-button size="small" type="danger" @click="dlePerson(sss.row.adminid)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-drawer v-model="personFlag" title="新增管理员" direction="rtl">
    <AddPerson @ok="personFn"></AddPerson>
  </el-drawer>
  <el-drawer v-model="editPersonFlag" title="编辑管理员信息" direction="rtl">
    <EditPerson :adminname="editName" @editOk="edit"></EditPerson>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref, markRaw } from 'vue';
import { IPerson } from '../../mytype';
import AddPerson from './AddPerson.vue';
import EditPerson from './EditPerson.vue'
import { ElMessageBox, ElNotification} from 'element-plus'
import { role } from '@/mydata/data';
import { getPersonApi, dlePersonApi } from '@/api/zhanghao';
import { Delete } from '@element-plus/icons-vue'

// 获取相关
const personFlag = ref(false)
const personData: IPerson[] = reactive([])

const personFn = () => {
  personFlag.value = false
  getPerson()
}

// 获取管理员列表
const getPerson = () => {
  getPersonApi().then((res: any) => {
    if (res.data.code === '200') {
      personData.length = 0
      personData.push(...res.data.data)
    }
  })
}

getPerson()


// 修改相关
const editPersonFlag = ref(false)

const editName = ref('')

const edit = () => {
  editPersonFlag.value = false
  getPerson()
}

const editPersonFn = (adminname) => {
  editPersonFlag.value = true
  editName.value = adminname
}


// 删除管理员
const dlePerson = (adminid: string) => {
  ElMessageBox.confirm(
    '真的要删除这个管理员？',
    '警告！',
    {
      confirmButtonText: '是的',
      cancelButtonText: '再想想',
      type: 'warning',
      icon: markRaw(Delete),
    }
  ).then(() => {
    dlePersonApi(adminid).then((res: any) => {
      if (res.data.code === '200') {
        ElNotification({
          message: '删除管理员成功',
          type: 'success',
        })
        getPerson()
      }
    })
  })
    .catch(() => {
      // catch error
    })
}

</script>

<style scoped>
.el-table {
  margin-top: 20px;
  border-radius: 15px;
}
</style>